<template>
  <!-- 添加或修改商品对话框 -->
  <el-dialog :title="props.title" v-model="showModel" width="500px" append-to-body>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="商户" prop="merchantId">
        <el-select v-model="form.merchantId" placeholder="请选择商户">
          <el-option v-for="shop in shopList" :key="shop.id" :label="shop.merchantName" :value="shop.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类" prop="categoryId">
        <el-select v-model="form.categoryId" placeholder="请选择分类">
          <el-option v-for="category in categoryList" :key="category.id" :label="category.categoryName" :value="category.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名" prop="goodsName">
        <el-input v-model="form.goodsName" placeholder="请输入商品名" />
      </el-form-item>
      <el-form-item label="商品介绍" prop="goodsDesc">
        <el-input v-model="form.goodsDesc" type="textarea" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="商品售价" prop="price">
        <el-input-number :min="0" :precision="2" v-model="form.price" placeholder="请输入商品售价" />
      </el-form-item>
      <el-form-item label="原价" prop="originalPrice">
        <el-input-number :min="0" :precision="2" v-model="form.originalPrice" placeholder="请输入商品售价" />
      </el-form-item>
      <el-form-item label="库存" prop="stock">
        <el-input-number :min="0" :precision="0" v-model="form.stock" placeholder="请输入商品售价" />
      </el-form-item>
      <el-form-item label="销量" prop="salesCount">
        <el-input-number :min="0" :precision="0" v-model="form.salesCount" placeholder="请输入销量" />
      </el-form-item>
      <el-form-item label="商品主图" prop="coverImage">
        <image-upload v-model="form.coverImage" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="hideDialog">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { shallowReactive, watch, watchEffect } from 'vue';
import type { Shop } from '@/types/shop';
import type { Category } from '@/types/category';
import type { Goods } from '@/types/goods';
import { addGoods, updateGoods } from '@/api/merchant/goods';

const { proxy } = getCurrentInstance();

const props = withDefaults(
  defineProps<{
    show: boolean;
    title: string;
  }>(),
  {
    show: false,
    title: '新增商品'
  }
);
const emits = defineEmits<{
  success: [];
}>();
const showModel = defineModel('show', { type: Boolean });
const shopList: Shop[] = inject('shopList');
const categoryList: Category[] = inject('categoryList');
const formRef = ref('');
const form: Goods = ref({
  id: 0,
  merchantId: '',
  categoryId: '',
  goodsName: '',
  goodsDesc: '',
  price: 0,
  originalPrice: 0,
  stock: 0,
  coverImage: '',
  salesCount: 0,
  createTime: '',
  updateTime: ''
});

const rules = reactive({
  goodsName: [{ required: true, message: '商品名不能为空', trigger: 'blur' }],
  price: [{ required: true, message: '商品售价不能为空', trigger: 'blur' }],
  originalPrice: [{ required: true, message: '原价不能为空', trigger: 'blur' }],
  createTime: [{ required: true, message: '$comment不能为空', trigger: 'blur' }]
});

// 父组件重置搜索 query
const resetQuery = inject('resetQuery');
// 设置表单信息
function setFormData(data: Goods) {
  form.value = data;
}
/** 提交按钮 */
function submitForm() {
  formRef.value.validate((valid) => {
    if (valid) {
      const { id } = form.value;
      const reqFunc = id ? updateGoods : addGoods;
      const msg = id ? '修改成功' : '新增成功';
      reqFunc(toValue(form)).then((response) => {
        proxy.$modal.msgSuccess(msg);
        hideDialog();
        resetQuery();
        emits('success');
      });
    }
  });
}
// 表单重置
function reset() {
  formRef.value.resetFields();
}

// 取消按钮
function hideDialog() {
  showModel.value = false;
  reset();
}

defineExpose({ setFormData });
</script>

<style></style>
